<template>
  <el-link class="no-select" type="primary" :underline="false">
    <span v-debounce="()=>{$emit('clickDown')}" :class="{'text': textLoading===name+index}">{{ name }}</span>
    <span v-show="textLoading===name+index" class="load"><i class="el-icon-loading" /></span>
  </el-link>
</template>

<script>
export default {
  name: 'ElinkLoading',
  props: {
    textLoading: {
      type: String,
      default: null
    },
    name: {
      type: String,
      default: null
    },
    index: {
      type: String,
      default: ''
    }
  }
};
</script>

<style lang="scss" scoped>
  ::v-deep .el-link--inner{
    position: relative;
    .text{
      color: rgba(64, 158, 255, 0.2);
    }
    .load{
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      display: flex;
      z-index: 10;
      align-items: center;
      justify-content: center;
    }
  }
</style>
